- @title = 'Form styling'

#summary
  :textile
    h2. Visual styling using @Ojay.Forms@
    
    In this example, we demonstrate how Ojay's @Forms@ module can be used to style form
    elements in such a way that does not alter the HTML structure of the form, and that
    encourages use of @label@ tags for accessibility. The form can still be serialized at
    any point without altering its structure and developers can still interact with the
    form programmatically with minor alterations to regular DOM code.
    
    The form elements are fully keyboard-accessible and are designed to behave as closely
    as possible to their default HTML counterparts.

:plain
    <style id="display-style" type="text/css">
        label.js {
            display:        block;
            font-size:      18px;
        }
        label.js.focused { color: #3EA9B0; }
        
        .radios { height: 60px; margin-bottom: 18px; }
        
        label.js.radio {
            background:     url(/images/dot-sprite.gif) left top no-repeat;
            float:          left;
            margin-right:   12px;
            height:         30px;
            padding:        4px 0 5px 50px;
            width:          100px;
        }
        label.js.radio.hovered { background-position: 0 -39px; }
        label.js.radio.checked { background-position: 0 -78px; }
        label.js.radio.hovered.checked { background-position: 0 -117px; }
        
        label.js.checkbox {
            background:     url(/images/tick-sprite.gif) left top no-repeat;
            display:        block;
            float:          left;
            font-size:      18px;
            height:         30px;
            padding:        4px 0 5px 50px;
            width:          240px;
            margin-right:   80px;
        }
        label.js.checkbox.hovered { background-position: 0 -39px; }
        label.js.checkbox.checked { background-position: 0 -78px; }
        label.js.checkbox.hovered.checked { background-position: 0 -117px; }
        
        .select-container {
            float:          left;
            width:          200px;
            height:         22px;
        }
        div.select-container.hovered, div.select-container.focused {
            background:     #ffc;
        }
        .select-display {
            border:         1px solid #999;
            font-size:      12px;
            padding:        2px 6px;
            height:         16px;
            overflow:       hidden;
        }
        .select-button {
            background:     url(/images/select.gif) left top no-repeat;
            position:       absolute;
            right:          1px;
            top:            1px;
            width:          20px;
            height:         20px;
        }
        .select-list {
            border-bottom:  2px solid #ccc;
            height:         140px;
            overflow-x:     hidden;
            overflow-y:     scroll;
        }
        .select-list ul {
            background:     #fff;
            border:         1px solid #ccc;
            border-top:     0;
            border-bottom:  0;
            list-style:     none;
            margin:         0;
            padding:        0;
            zoom:           1;
        }
        .select-list li {
            border-top:     1px solid #9ab;
            display:        block;
            list-style:     none;
            padding:        4px 8px;
            zoom:           1;
        }
        .select-list li.hovered {
            background:     #cef;
        }
        
        #form-result { margin: 30px 0; }
    </style>
  
    <form action="/" method="post" id="the-form">
        <div class="radios">
            <input type="radio" name="cc" value="visa" id="cc_visa" />
            <label for="cc_visa">Visa</label>
            
            <input type="radio" name="cc" value="amex" id="cc_amex" />
            <label for="cc_amex">AmEx</label>
            
            <input type="radio" name="cc" value="switch" id="cc_switch" />
            <label for="cc_switch">Switch</label>
            
            <input type="radio" name="cc" value="mastercard" id="cc_mastercard" />
            <label for="cc_mastercard">Mastercard</label>
        </div>
        <input type="checkbox" name="accept" id="accept" value="1" /> 
        <label for="accept">Accept terms and conditions?</label>
        
        <label for="delivery">Delivery method</label>
        <select name="delivery" id="delivery">
            <option value="null">Choose...</option>
            <option value="saver">Super-saver (5 days)</option>
            <option value="first-class">First class post</option>
            <option value="recorded-delivery">Recorded delivery</option>
            <option value="air-mail">Air mail</option>
            <option value="by-sea">Delivery by sea</option>
            <option value="electronic">e-ticket</option>
        </select>
    </form>
    
    <div id="form-result"></div>
  
    <script id="display-script" type="text/javascript">
        var radios   = new Ojay.Forms.RadioButtons('.radios input');
        var checkbox = new Ojay.Forms.Checkbox('#accept');
        var select   = new Ojay.Forms.Select('#delivery');
        
        [radios, checkbox, select].forEach(it().on('change', function(input) {
            Ojay('#form-result').setContent('You selected: ' + input.getValue());
        }));
    </script>